<template>
    <div id="itemBox">
        <div id="price">
            <div>
                <input type="button" value="从"><input type="text" placeholder="最低价格" v-model="min"><input type="button" value="到"><input type="text" placeholder="最高价格" v-model="max"><input type="button" value="查询" class="button" @click="select">
            </div>
        </div>
        <div id="items">
            <div>
                <div class="item" v-for="item in data.computers" :key="item.id" >
                    <img :src="item.url" alt="">
                    <p>{{item.brand + " " + item.model}}</p>
                    <p>￥{{item.price}} </p>
                    <input type="button" value="加入购物车" class="button" @click="like(item)"><input type="button" value="收藏"
                    class="button-white">
                </div>
            </div>
        </div>
        <div>
            {{ this.items }}
        </div>
        <div id="page">
            <div>
                一共<span> {{ data.pageSum }} </span>页 当前第<span>{{ data.pageNumber }}</span>页<input type="button" class="button-white" value="下一页" @click="nextPage(data.pageNumber)"><input type="button" class="button-white" value="末页" @click="endPage(data.pageSum)"> 转到<input type="text" v-model="pageSum" @keydown="toPage">页
            </div>
        </div>
    </div>
</template>
<script>


export default{
    data(){
        return {
            min:null,
            max:null,
            pageSum:null
        }
    },
    methods: {
        endPage(num){
            this.$emit('toPage', num)
        },
        nextPage(num){
            this.$emit('toPage', num + 1)
        },
        toPage(){
            this.$emit('toPage',Number.isNaN(this.pageSum)?0:this.pageSum)
        },
        select(){
            this.$emit('selectPrice', this.min, this.max)
        },
        like(item){
            console.log("子组件")
            console.log(item)
            this.$emit('ILikeItem', item)
        }
    },
    props:{
        data:Object
    },
    emits:['selectPrice','ILikeItem','toPage']
}
</script>
